<template>
  <div class="msite" ref="msite">
    <van-sticky :offset-top="0">
      <form action="/">
        <!-- <van-search v-model="search" placeholder="请输入搜索关键词" @click="$router.push('/search')" /> -->
        <van-search v-model="search" placeholder="请输入搜索关键词" />
        <!-- <van-search v-model="search" placeholder="请输入搜索关键词" @click="show = true" />
        <van-popup class="popup" v-model="show" position="right" closeable>
          <search-detail />
        </van-popup> -->
      </form>
    </van-sticky>
    <!-- 轮播 -->
    <msite-swiper :listData="swiperList" />
    <!-- 租车界面 -->
    <msite-location />
    <!-- 大礼包 -->
    <msite-gift :listData="gift_li_box" />
    <!-- 广告 -->
    <msite-advertise :listData="advertList" />
    <!-- 卡片 -->
    <msite-card :listData="cardList" />
    <!-- 类别 -->
    <msite-icon :listData="iconList" />
    <!-- 类别内容 -->
    <msite-tabs />

    <router-view />

    <footer-guide />
  </div>
</template>
<script>
import MsiteSwiper from "../../components/Msite/MsiteSwiper.vue";
import MsiteLocation from "../../components/Msite/MsiteLocation.vue";
import MsiteGift from "../../components/Msite/MsiteGift.vue";
import MsiteAdvertise from "../../components/Msite/MsiteAdvertise.vue";
import MsiteCard from "../../components/Msite/MsiteCard.vue";
import MsiteIcon from "../../components/Msite/MsiteIcon.vue";
import MsiteTabs from "../../components/Msite/MsiteTabs.vue";
import FooterGuide from "../../components/FooterGuide/FooterGuide.vue";
import SearchDetail from "../../components/Msite/Components/SearchDetail.vue";
import { getSwiperList, getGiftList, getAdvertiseList, getGuideList, getAdvertiseTwoList } from "../../api";

export default {
  components: {
    MsiteSwiper,
    MsiteLocation,
    MsiteGift,
    MsiteAdvertise,
    MsiteCard,
    MsiteIcon,
    MsiteTabs,
    FooterGuide,
    SearchDetail
  },
  data() {
    return {
      search: "",
      show: false,
      swiperList: [],
      gift_li_box: [],
      cardList: [],
      iconList: [],
      advertList: []
    }
  },
  created() {
    this.getSwiperList();
  },
  mounted() {
    if(this.$cookie.get('userId') !== '' && this.$cookie.get('userId') !== null) {
      setInterval(() => {
        this.$cookie.get('timer');
      }, 5000)
    }
  },
  methods: {
    // 获取轮播组件数据
    getSwiperList() {
      let that = this;
      getSwiperList().then(res => {
        that.swiperList = res.data.data;
      })
      getGiftList().then(res => {
        that.gift_li_box = res.data.data;
      })
      getAdvertiseTwoList().then(res => {
        that.advertList = res.data.data;
      })
      getAdvertiseList().then(res => {
        that.cardList = res.data.data;
      })
      getGuideList().then(res => {
        that.iconList = res.data.data;
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.msite {
  background-color: rgb(236, 236, 236);
  margin-bottom: $height * 3;
  // 弹出层
  .popup {
    width: 100%;
    height: 100%;
  }
}
</style>
